<!--ADDBOX-->
<div class="row-fluid sortable">
	<div class="box span12">
		<div class="box-header well" data-original-title>
			<h2><i class="icon-plus"></i> New Banners</h2>
			<div class="box-icon">
				<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-down"></i></a>
				<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
			</div>
		</div>
		<div id="box-add" class="box-content" style="display: none">
			<form class="form-horizontal" method="POST" action="<?php echo $this->Html->url(array('controller' => 'banners', 'action' => 'add', 'api' => true));?>">
			  <fieldset>
				<legend>New Banners</legend>   
			  	<div class="control-group">
				  <label class="control-label" for="BannerHref">Href</label>
				  <div class="controls">
				  	<input class="input-xlarge" id="BannerHref" type="text" value="" name="data[Banner][href]" required="required">
				  </div>
			  	</div>
			  	<div class="control-group">
				  <label class="control-label" for="BannerImages">Images</label>
				  <div class="controls">
				  	<input rel="<?php echo $this->Html->url(array('controller' => 'banners', 'action' => 'upload', 'ajax' => true));?>" class="input-xlarge" id="BannerImages" type="file" multiple>				  	
				  </div>
			  	</div> 			  						
				<div class="form-actions">
				  <button type="submit" class="btn btn-primary">Save</button>
				  <button id="reset" type="reset" class="btn">Reset</button>
				</div>
			  </fieldset>
			  <ul id="fb-photo-selected" class="thumbnails gallery"></ul>
			</form>
		</div>
	</div>
</div>
<!--TABLE-->
<div class="row-fluid sortable">		
	<div class="box span12">
		<div class="box-header well" data-original-title>
			<h2><i class="icon-camera"></i> Banner Management</h2>
			<div class="box-icon">
				<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
				<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
			</div>
		</div>
		<div id="box-index" class="box-content" alt="<?php echo $this->Html->url(array('controller' => 'banners', 'action' => 'index', 'ajax' => true));?>">	
		</div>
	</div>
</div>

<!-- SCRIPT -->
<script type="text/javascript">
$(document).ready(function () {
	IndexBox.display();
	AddBox.listen();
	$("#BannerImages").change(function(e){
		e.preventDefault();

	    var formData = new FormData();
	    if(this.files.length == 0){
		    return false;
	    }
	    for(var i = 0; i < this.files.length; i ++){
			formData.append('data[Upload][]', this.files[i]);		    
	    }
	    Loading.show();
	    $.ajax({
	    	url: $(this).attr("rel"),
	        type: 'POST',
	        xhr: function() { 
	            var myXhr = $.ajaxSettings.xhr();
	            if(myXhr.upload){
	                myXhr.upload.addEventListener('progress', UploadPhotoBox.progressHandling, false);
	            }
	            return myXhr;
	        },
	        beforeSend: function(){
	        },
	        success: function(data){
	        	$("#fb-photo-selected").prepend(data);
	        },
	        error: function(){
	        },
	        complete: function(){
		        Loading.hide();
	        },
	        data: formData,
	        cache: false,
	        contentType: false,
	        processData: false
	    });	
	});
});
</script>